<template>
    <div class="index" ref="record">
        <el-container>
            <el-header>
                <div class="bulletin_box flex_row align_items_center justify_content_between">
                    <div class="flex_row align_items_center">
                        <div class="flex_row align_items_center">
                            <span>最新公告</span>
                            <img class="bulletin_icon" src="../../assets/bulletin_icon.png" alt /> ：
                        </div>
                        <vue-seamless-scroll
                            :data="newsList"
                            :class-option="optionLeft"
                            class="seamless-warp2"
                            v-if="newsList.length>0"
                        >
                            <ul class="item flex_row align_items_center">
                                <li
                                    v-for="(item,index) in newsList"
                                    v-text="item.title"
                                    :key="index"
                                ></li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                    <!-- <div>开奖后,记录更新预计5-30分钟</div> -->
                </div>
            </el-header>
            <el-main>
                <div class="main_content">
                    <div class="c00_bg">
                        <div
                            class="Banner c00_bg flex_row align_items_center justify_content_center"
                        >
                            <div>全能猫全网最全的猫</div>
                            <!-- <div>满足大部分用户的需求</div> -->
                        </div>
                    </div>
                    <div class="content">
                        <div class="title flex_row align_items_end">
                            <div>{{$route.query.lotto_type}}</div>
                            <el-button
                                type="text"
                                style="padding:0;margin-left:30px;"
                                @click="$router.push('/index')"
                            >返回首页</el-button>
                        </div>
                        <div class="nav flex_row justify_content_start">
                            <el-button
                                @click="WeekClick(index)"
                                v-for="(item,index) in weekData"
                                :key="index"
                                :style="{color:currentDate === index?'#fff':'',background:currentDate === index?'#c00':'#fff'}"
                            >{{item.txt}}</el-button>
                        </div>
                        <div class="m_table">
                            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                                <el-table-column prop="time" label="开奖时间" width="100"></el-table-column>
                                <el-table-column prop="stages" label="期号"></el-table-column>
                                <el-table-column prop="attribute" label="一">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <!-- {{scope.row.attribute[0]}} -->
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[0].wave==='蓝'?'blue':scope.row.attribute[0].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[0].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[0].wave==='蓝'?'blue':scope.row.attribute[0].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[0].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attribute" label="二">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <!-- {{scope.row.attribute[1]}} -->
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[1].wave==='蓝'?'blue':scope.row.attribute[1].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[1].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[1].wave==='蓝'?'blue':scope.row.attribute[1].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[1].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attribute" label="三">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[2].wave==='蓝'?'blue':scope.row.attribute[2].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[2].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[2].wave==='蓝'?'blue':scope.row.attribute[2].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[2].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attribute" label="四">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[3].wave==='蓝'?'blue':scope.row.attribute[3].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[3].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[3].wave==='蓝'?'blue':scope.row.attribute[3].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[3].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attribute" label="五">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[4].wave==='蓝'?'blue':scope.row.attribute[4].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[4].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[4].wave==='蓝'?'blue':scope.row.attribute[4].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[4].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="attribute" label="六">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[5].wave==='蓝'?'blue':scope.row.attribute[5].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[5].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[5].wave==='蓝'?'blue':scope.row.attribute[5].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[5].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="特">
                                    <template slot-scope="scope">
                                        <div class="flex_row align_items_center">
                                            <div
                                                class="code_color"
                                                :style="{background:scope.row.attribute[6].wave==='蓝'?'blue':scope.row.attribute[0].wave==='红'?'red':'green'}"
                                                v-show="currentDate === 0"
                                            >{{scope.row.attribute[6].number}}</div>
                                            <div
                                                :style="{color:scope.row.attribute[5].wave==='蓝'?'blue':scope.row.attribute[5].wave==='红'?'red':'green'}"
                                            >{{scope.row.attribute[6].value}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score_ds" label="单双" width="50">
                                    <template slot-scope="scope">
                                        <div
                                            :style="{color:scope.row.score_ds === '双'?'#1161e9':'#ef1844'}"
                                        >{{scope.row.score_ds}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score_dx" label="大小" width="50">
                                    <template slot-scope="scope">
                                        <div
                                            :style="{color:scope.row.score_dx === '小'?'#1161e9':'#ef1844'}"
                                        >{{scope.row.score_dx}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="和值" width="50"></el-table-column>
                            </el-table>
                        </div>
                        <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            background
                            :page-size="30"
                            layout="total, prev, pager, next"
                            :total="tableMeta.total"
                        ></el-pagination>
                    </div>
                </div>
            </el-main>
            <el-footer style="background:#c00" class="flex_row align_items_center">
                <div class="m_footer flex_row align_items_center justify_content_center">
                    <div>联系我们：QQ客服：408322304</div>
                     <el-button
                        type="text"
                        style="color:#fff;margin-left:10px;"
                        v-clipboard:copy="copyTxt"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError"
                    >复制</el-button>
                </div>
            </el-footer>
            <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
        </el-container>
        <el-backtop :right="40" :bottom="100" ref="toTop"></el-backtop>
    </div>
</template>

<script>
let LottoType = "";
const PAGE_SIZE = 30;
let page = 1;
const SHASHA_1_SECRET = "OK6vff3Rckog6Ye7";
export default {
    props: {},
    metaInfo() {
        return {
            title: this.$route.query.lotto_type + "开奖记录",
            meta: [
                {
                    name: "apple-mobile-web-app-capable",
                    content: "yes"
                },
                {
                    name: "viewport",
                    content:
                        "width=device-width,initial-scale=0.4,maximum-scale=1.0,minimum-scale=0.1,user-scalable=0,user-scalable=yes"
                },
                {
                    name: "apple-mobile-web-app-status-bar-style",
                    content: "white"
                }
            ]
        };
    },
    data() {
        return {
            copyTxt:'408322304',
            newsList: [],
            weekData: [
                {
                    val: "zodiac",
                    txt: "号码"
                },
                {
                    val: "elements",
                    txt: "五行"
                },
                {
                    val: "dx",
                    txt: "大小"
                },
                {
                    val: "numbers",
                    txt: "单双"
                },
                {
                    val: "wave",
                    txt: "波色"
                },
                {
                    val: "jiaye",
                    txt: "家野"
                },
                {
                    val: "composite_ds",
                    txt: "合单双"
                },
                {
                    val: "composite_dx",
                    txt: "合大小"
                },
                {
                    val: "part",
                    txt: "段数"
                }
            ],
            currentDate: 0,
            tableData: [],
            currentPage: 1,
            tableMeta: {
                total: 0
            },
            loading: true
        };
    },
    computed: {
        optionLeft() {
            return {
                direction: 2,
                limitMoveNum: 1
            };
        }
    },
    created() {
        // console.log(this.$route.query);
        // this.title = this.$route.query.lotto_type
        LottoType = this.$route.query.id;
        this.$getSystem().then(data => {
            // console.log(data);
            if (data == null) {
                this.newsList = [];
            } else {
                this.newsList.push({
                    title: data.notice
                });
            }
        });
        this.lotteryRecord();
    },
    updated() {
        // if (
        //     document.documentElement.clientWidth < 750 ||
        //     document.documentElement.clientWidth === 750
        // ) {
        //     setTimeout(() => {
        //         console.log(document.documentElement.clientWidth, "222");
        //         console.log(
        //             document.body.scrollWidth,
        //             document.body.offsetWidth
        //         );
        //         console.log(
        //             (document.body.scrollWidth - document.body.offsetWidth) / 2
        //         );
        //         document.documentElement.scrollBy(
        //             document.body.scrollWidth - document.body.offsetWidth,
        //             0
        //         );
        //     }, 5000);
        // }
    },
    mounted() {},
    watch: {},
    methods: {
        WeekClick(e) {
            // console.log(e);
            this.currentDate = e;
            page = 1;
            this.tableMeta.total = 0;
            this.lotteryRecord();
        },
        handleCurrentChange(val) {
            // console.log(val);
            // 分页加载
            page = val;
            this.loading = true;
            this.$refs.toTop.handleClick();
            // document.documentElement.scrollTop = 0;
            // console.log(this.$refs.toTop)
            this.lotteryRecord();
        },
        lotteryRecord() {
            let rsaStr = `lotto_type=${LottoType}&type=${
                this.weekData[this.currentDate].val
            }&page_size=${PAGE_SIZE}&page=${page}&timestamp=${Number(
                new Date()
            )}`;
            // 签名前排序
            this.$strSort(rsaStr).then(str => {
                // console.log(str);
                // console.log(`${SHASHA_1_SECRET}${rsaStr}`);
                // 签名
                let sha1Str = this.sha1(`${SHASHA_1_SECRET}${str}`);
                rsaStr = `${rsaStr}&sign=${sha1Str}`;
                // console.log(rsaStr);
                // 加密
                this.$getCode(rsaStr).then(rsaCode => {
                    this.http.lotteryRecord(rsaCode).then(res => {
                        // console.log(res);
                        this.loading = false;
                        if (res.data.errno === "000") {
                            this.tableData = res.data.result.data;
                            this.tableMeta = res.data.result.meta;
                        } else {
                            this.tableData = [];
                            this.tableMeta.total = 0;
                        }
                    });
                });
            });
        },
        onCopy() {
            // //console.log(this.$refs.copy.innerText)
            this.$message.closeAll();
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.closeAll();
            this.$message.error("复制失败，请重试");
        },
    },
    components: {}
};
</script>

<style>
.el-header {
    background-color: #ebebeb;
    color: #333;
    /* text-align: center; */
    line-height: 60px;
}
.el-main {
    padding: 0;
}
.seamless-warp2 {
    overflow: hidden;
    height: 25px;
    width: 380px;
}
.seamless-warp2 ul.item {
    min-width: 700px;
}

.seamless-warp2 ul li {
    line-height: 25px;
    margin-right: 30px;
    color: #c00;
}
.forks_ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}

.forks_ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #409eff;
}

.forks_ul::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
}
</style>
<style scoped lang="less">
@import url("./index.less");
</style>